import { default } from './mosowe-tree/mosowe-tree.vue';
<template>
  <view v-for="(item, index) in state.list" :key="index" class="item_box">
    <view class="item" @click="click(item)">
      <view class="item_left">
        <text v-if="isShowLeftIcon(item).isShow" :class="isShowLeftIcon(item).icon"></text>
        <view class="item_text">{{ item[props.objInfo.label] }}</view>
      </view>
      <text
        v-if="item[props.objInfo.children]"
        :animation="getAnimation(item)"
        :class="'cuIcon-unfold text-gray'"
      ></text>
      <!-- fold unfold -->
    </view>
    <div
      :class="
        state.select && state.select.includes(item[props.objInfo.value])
          ? 'item_box_grid template_rows'
          : 'item_box_grid'
      "
    >
      <div class="item_children">
        <th-collapses
          :list="item[props.objInfo.children]"
          :objInfo="props.objInfo"
          :isShowLeftIcon="isShowLeftIcon"
          :isAccordion="isAccordion"
          :clearSelect="state.clearSelect"
          @click="childrenClick"
        ></th-collapses>
        <!-- :clearSelect="state.clearSelect" -->
      </div>
    </div>
    <slot></slot>
  </view>
</template>

<script lang="ts" setup name="thCollapses">
const props = defineProps({
  list: {
    type: [Object],
    default: () => [],
  },
  objInfo: {
    type: Object,
    default: () => {
      return {
        value: 'id', // ID字段名
        label: 'label', // 显示名称
        children: 'children', // 子级字段名
      };
    },
  },
  isAccordion: {
    // 手风琴
    type: Boolean,
    default: false,
  },
  isShowLeftIcon: {
    // 传递一个方法 在何种情况下显示 左侧 icon 显示什么样子的 icon
    type: Function,
    default: () => {
      return {
        isShow: false,
        icon: 'cuIcon-calendar',
      };
    },
  },
  clearSelect: {
    type: Number,
    default: 0,
  },
});
const emits = defineEmits(['change', 'update:list', 'click']);

const state = reactive({
  loading: false,
  list: [],
  select: [],
  clearSelect: 0,
  animationData: {},
});

watch(
  () => props.list,
  (val) => {
    state.list = val;
  },
  { immediate: true, deep: true },
);
watch(
  () => props.clearSelect,
  (val) => {
    // console.log(state.select);
    state.select = [];
    // console.log('props.clearSelect', val, state.select);
  },
  { immediate: true, deep: true },
);
// watch(
//   () => props.objInfo,
//   (val) => {
//     console.log('val', val, 'objInfo');
//   },
//   { immediate: true, deep: true },
// );
const click = (info) => {
  if (state.loading) return;
  state.loading = true;
  const key = props.objInfo.value;
  const value = info[key];
  let list = state.select;
  if (list && list.includes(value)) {
    list.forEach((item, index) => {
      if (value == item) {
        state.select.splice(index, 1);
      }
    });
    state.clearSelect += 1;
  } else if (props.isAccordion) {
    list = [value];
    state.select = list;
    state.clearSelect += 1;
  } else {
    list.push(value);
    state.select = list;
  }
  // console.log(list);
  emits('click', info);
  setTimeout(() => {
    state.loading = false;
  }, 200);
};

const childrenClick = (info) => {
  emits('click', info);
};

const getAnimation = (item) => {
  let rota = 0;
  if (state.select.includes(item[props.objInfo.value])) {
    rota = -180;
  } else {
    rota = 0;
  }
  const animation = uni.createAnimation({
    duration: 300,
    timingFunction: 'ease',
  });
  animation.rotate(rota).step();
  return animation.export();
};

const handleClear = () => {
  emits('update:value', '');
};
</script>

<style scoped lang="scss">
.item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.item_box_grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s;
  overflow: hidden;
  .item_children {
    min-height: 0;
  }
}
.item_box_grid.template_rows {
  grid-template-rows: 1fr;
}
.item_box {
  width: 100%;
  padding: 12rpx 0 0 16rpx;
  box-sizing: border-box;
  .item {
    padding-bottom: 16rpx;
    border-bottom: 3rpx solid #f1f1f1;
    .item_left {
      display: flex;
      align-items: center;
    }
    .item_text {
      padding: 8rpx 8rpx 8rpx 8rpx;
      color: #333;
      font-size: 0.98rem;
    }
    .cuIcon-right {
      font-size: 1.1rem;
    }
  }
}
</style>
